<template>
  <j-modal
    :title='title'
    :width='width'
    :visible='visible'
    :confirmLoading='confirmLoading'
    switchFullscreen
    @ok='handleOk'
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel='handleCancel'
    cancelText='关闭'>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row>
          <a-col :span='24'>
            <a-form-item label='商机名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-popup
                placeholder='请选择商机名称'
                v-decorator="['opportunityName',validatorRules.opportunityName]"
                :trigger-change='true'
                org-fields='id,name,num,short_name,sale_leader'
                dest-fields='opportunityId,opportunityName,opportunityNum,shortName,saleLeader'
                code='bus_business_opportunity_select'
                :param='{saleLeader: $store.getters.userInfo.realname}'
                @callback='popupCallback'
                :disabled="this.isAdd==='1'&&this.planType==='3'"
              />
              <a-input v-decorator="['opportunityId']" v-show='false'></a-input>
            </a-form-item>
          </a-col>
          <a-col :span='24'>
            <a-form-item label='客户简称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input v-decorator="['shortName']" placeholder='选择商机名称即可自动生成' disabled></a-input>
            </a-form-item>
          </a-col>
          <a-col :span='24'>
            <a-form-item label='任务描述' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-textarea v-decorator="['taskDes',validatorRules.taskDes]"
                          rows='4'
                          placeholder='请输入任务描述'
                          :disabled="this.isAdd==='1'&&this.planType==='3'"
              />

            </a-form-item>
          </a-col>
          <a-col :span='24'>
            <a-form-item label='任务状态' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-dict-select-tag type='list'
                                 v-decorator="['taskState', validatorRules.taskState]"
                                 :trigger-change='true'
                                 dictCode='pm_project_task_state'
                                 placeholder='请选择任务状态'
                                 @change='taskStateChange'
              />
            </a-form-item>
          </a-col>
          <a-col :span='24' v-if="taskStateType === '3' ">
            <a-form-item label='未完成原因' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-textarea
                v-decorator="['incompleteCause',validatorRules.incompleteCause]"
                rows='4'
                placeholder='请输入未完成原因' />
            </a-form-item>
          </a-col>
          <a-col :span='24' v-if="taskStateType === '4' ">
            <a-form-item label='完成情况' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-textarea
                v-decorator="['completeCause',validatorRules.completeCause]"
                rows='4'
                placeholder='请输入完成情况' />
            </a-form-item>
          </a-col>
          <a-col :span='24'>
            <a-form-item label='责任人' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-select-user-by-dep v-decorator="['dutyPersionId']" :disabled="classifyShowInput == 'add'" />
            </a-form-item>
          </a-col>
          <a-col :span='24'>
            <a-form-item label='参与人' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-select-user-by-dep v-decorator="['participants']" :disabled="classifyShowInput == 'add'" />
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>

import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import HfSubjectSelectModal from './HfSubjectSelectModal'
import HfTargetsSelectModal from './HfTargetsSelectModal'

export default {
  name: 'HfBussinessProjectTasksModal',
  components: {},
  props: {
    mainId: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      title: '操作',
      width: 800,
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      validatorRules: {
        subjectName: {
          rules: [
            { required: true, message: '请选择项目专题!' }
          ]
        },
        targetName: {
          rules: [
            { required: true, message: '请选择关键目标!' }
          ]
        },
        taskDes: {
          rules: [
            { required: true, message: '请输入任务描述!' }
          ]
        },
        taskState: {
          rules: [
            { required: true, message: '请输入任务描述!' }
          ]
        },
        incompleteCause: {
          rules: [
            { required: true, message: '请输入未完成原因!' }
          ]
        },
        completeCause: {
          rules: [
            { required: true, message: '请输入未完成原因!' }
          ]
        }
      },
      url: {
        add: '/bussiness/hfBussinessDoubleWeekPlan/addHfBussinessProjectTasks',
        edit: '/bussiness/hfBussinessDoubleWeekPlan/editHfBussinessProjectTasks'
      },
      planType: '',
      isAdd:'',
      taskStateType:'',
      fields: [
        'createBy',
        'createTime',
        'updateBy',
        'updateTime',
        'sysOrgCode',
        'deleteFlag',
        'planId',
        'subjectId',
        'subjectName',
        'subjectCode',
        'targetId',
        'targetName',
        'targetCode',
        'taskCode',
        'taskDes',
        'planStartTime',
        'planEndTime',
        'closeTime',
        'taskState',
        'dutyPersionId',
        'remarks',
        'completeCause',
        'incompleteCause',
        'examiner',
        'examinerTime',
        'customerId',
        'shortName',
        'opportunityName',
        'opportunityId',
        'participants'
      ]

    }
  },
  created() {
  },
  methods: {
    taskStateChange(value) {
      this.taskStateType = value

    },
    add() {
      this.edit({})
    },
    addRecord(record) {
      this.edit(record)
    },
    edit(record) {

      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, this.fields))
      })
      this.classifyShowInput()
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.taskStateType = ''
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          formData['planId'] = this.mainId
          console.log('表单提交数据', formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }

      })
    },
    validateError(msg) {
      this.$message.error(msg)
    },
    handleCancel() {
      this.close()
    },
    popupCallback(row) {
      this.form.setFieldsValue(pick(row, this.fields))
    }


  }
}
</script>
